<template>
    <div class="box-item">
        <div class="box-title">城市分布</div>
        <div class="box-body">
            <div class="chart-container">
                <Echart id="charts_top1" :options="options" class="left_center_inner" ref="charts1" height="300px" />
                <div class="bg"></div>
            </div>
        </div>
    </div>
</template>

<script>
import { getPie3D, getParametricEquation } from '@/utils/chart'; //工具类js，页面路径自己修改

export default {
    name: 'PackRTL',
    data() {
        return {
            options: {},
            optionData: [
                {
                    name: '北京',
                    value: 360,
                    itemStyle: {
                        color: '#157EF9',
                    },
                },
                {
                    name: '上海',
                    value: 120,
                    itemStyle: {
                        color: '#FF8E00',
                    },
                },
                {
                    name: '郑州',
                    value: 160,
                    itemStyle: {
                        color: '#5D54E3',
                    },
                },
                {
                    name: '苏州',
                    value: 180,
                    itemStyle: {
                        color: '#6DCDE6',
                    },
                }, {
                    name: '济南',
                    value: 90,
                    itemStyle: {
                        color: '#EABA7D',
                    },
                },
                {
                    name: '青岛',
                    value: 90,
                    itemStyle: {
                        color: '#3D7AA6',
                    },
                },
            ],
        };
    },
    created() {
        this.getData();
    },
    mounted() { },
    beforeDestroy() { },
    methods: {
        getData() {
            let legend = {
                // orient: "vertical",
                bottom: '5%',
                // top: '30%',
                left: 'center',
                itemGap: 5, // 设置图例之间的间距为20像素
                formatter: function (param) {
                    return param;
                },
            };
            // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
            const options = getPie3D(this.optionData, 0, 310, 15, 9, 0.9, legend);
            // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
            options.series.push({
                name: '', //自己根据场景修改
                backgroundColor: 'transparent',
                type: 'pie',
                label: {
                    opacity: 1,
                    fontSize: 13,
                    lineHeight: 20,
                    formatter: '{d}%'
                    // formatter: '{b}: {c} ({d}%)' // 自定义标签内容格式
                    // show: false // 隐藏标签
                },
                startAngle: -50, // 起始角度，支持范围[0, 360]。
                clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
                radius: ['20%', '30%'],
                center: ['50%', '52%'],
                data: this.optionData,
                itemStyle: {
                    opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
                },
            });
            this.options = options;
        },
    },
};
</script>

<style lang="scss" scoped>
.box-item {
    width: 600px;
    height: 310px;
    // background: url('../../../assets/img/launch/pack/pack_box_bg1.png') no-repeat center;
    // background-position: center center;
    // background-size: 100% 100%;
    // margin-bottom: 25px;

    .box-title {
        position: relative;
        margin-top: 10px;
        margin-bottom: 10px;
        height: 35px;
        line-height: 30px;
        // text-indent: 3em;
        padding-left: 50px;
        font-size: 20px;
        // background: linear-gradient(90deg, rgba(21, 77, 160, 0.2) 0%, rgba(21, 77, 160, 0) 100%), linear-gradient(270deg, rgba(21, 77, 160, 0) 0%, rgba(21, 132, 185, 0.44) 100%);
        background: url('../../../assets/img/launch/pack/header.png') no-repeat center;
        background-position: left center;
        background-size: cover;
    }

    .box-body {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        height: 230px;

        .chart-container {
            position: relative;
            width: 100%;
            height: 230px;

            .left_center_inner,
            .bg {
                width: 100%;
                height: 100%;
            }

            .left_center_inner {
                left: 8px;
                top: -75px;
                z-index: 1;
                // border: 1px solid red;
            }

            .bg {
                position: absolute;
                bottom: 45px;
                left: 53%;
                background: url('../../../assets/img/launch/pie_bg.png') no-repeat center;
                background-size: 65% 65%;
                transform: translateX(-50%);
            }
        }
    }
}
</style>